<template>
  <Navbar />
  <div class="w-full relative">
    <Carousel :images="carouselImages" :interval="5000">
      <template v-slot:default="{ image }">
        <div class="carousel-item w-full h-full bg-100% bg-center bg-no-repeat" :style="{ backgroundImage: `url(${getImageUrl(image.src)})` }"></div>
      </template>
    </Carousel>
    <img class="invisible w-full object-cover" src="/src/assets/img/server_bg.png" alt="">
  </div>
  <p class="text-center mt-5 md:mt-11 mb-5 md:mb-17 font-bold text-[28px]/[48px] text-[#000]">高定服务</p>
  <div class="hidden lg:flex justify-center gap-[90px]">
    <div class="w-[226px] bg-[#FBF5FFFF] cursor-pointer text-[#B660BEFF]  text-center text-2xl/[100px]">
      <p :class="'w-full h-[100px] hover:bg-[#B660BEFF] hover:text-[#fff]', current === 2 && 'bg-[#B660BEFF] text-[#fff]'" @click="current = 2">高端旅游</p>
      <p :class="'w-full h-[100px] hover:bg-[#B660BEFF] hover:text-[#fff]', current === 3 && 'bg-[#B660BEFF] text-[#fff]'" @click="current = 3">名校访问</p>
      <p :class="'w-full h-[100px] hover:bg-[#B660BEFF] hover:text-[#fff]', current === 6 && 'bg-[#B660BEFF] text-[#fff]'" @click="current = 6">高端医疗服务</p>
      <p :class="'w-full h-[100px] hover:bg-[#B660BEFF] hover:text-[#fff]', current === 4 && 'bg-[#B660BEFF] text-[#fff]'" @click="current = 4">高端养老</p>
      <p :class="'w-full h-[100px] hover:bg-[#B660BEFF] hover:text-[#fff]', current === 5 && 'bg-[#B660BEFF] text-[#fff]'" @click="current = 5">国内养老</p>
    </div>
    <div>
      <img class="w-[640px] object-cover" :src="getImageUrl(list[current].src)" alt="">
      <p class="pt-4 text-base/8 text-[#666666FF]">{{ list[current].desc}}</p>
    </div>
  </div>
  <div class="lg:hidden pb-10">
    <div class="flex bg-[#FBF5FFFF] justify-between cursor-pointer text-[#B660BEFF]  text-center text-sm/[60px]">
      <p :class="['pl-1 pr-1 h-[60px]', current === 2 && 'bg-[#B660BEFF] text-[#fff]']" @click="current = 2">高端旅游</p>
      <p :class="['pl-1 pr-1 h-[60px]', current === 3 && 'bg-[#B660BEFF] text-[#fff]']" @click="current = 3">名校访问</p>
      <p :class="['pl-1 pr-1 h-[60px]', current === 6 && 'bg-[#B660BEFF] text-[#fff]']" @click="current = 6">高端医疗服务</p>
      <p :class="['pl-1 pr-1 h-[60px]', current === 4 && 'bg-[#B660BEFF] text-[#fff]']" @click="current = 4">高端养老</p>
      <p :class="['pl-1 pr-1 h-[60px]', current === 5 && 'bg-[#B660BEFF] text-[#fff]']" @click="current = 5">国内养老</p>
    </div>
    <div>
      <img class="w-full object-cover" :src="getImageUrl(list[current].src)" alt="">
      <p class="pt-4 pl-2 text-base/8 text-[#666666FF]">{{ list[current].desc}}</p>
    </div>
  </div>
  <Footer />

</template>
<script setup>
import Footer from '@/components/Footer.vue';
import Navbar from '@/components/Navbar.vue'
import Carousel from '@/components/Carousel.vue';
import { reactive, ref, computed } from 'vue'
let list = reactive({
  2: {
    desc: '日本著名大学访学，行业研讨会参访等，对接世界最新行业发展动态，为一流人才提供一流的交流平台。',
    src: 'server_2.png'
  },
  3: {
    desc: '日本著名大学访学，行业研讨会参访等，对接世界最新行业发展动态，为一流人才提供一流的交流平台。',
    src: 'server_3.png'
  },
  4: {
    desc: '日本著名大学访学，行业研讨会参访等，对接世界最新行业发展动态，为一流人才提供一流的交流平台。',
    src: 'server_4.png'
  },
  5: {
    desc: '日本著名大学访学，行业研讨会参访等，对接世界最新行业发展动态，为一流人才提供一流的交流平台。',
    src: 'server_5.png'
  },
  6: {
    desc: '日本著名大学访学，行业研讨会参访等，对接世界最新行业发展动态，为一流人才提供一流的交流平台。',
    src: 'server_6.png'
  },
})
let carouselImages = reactive([
  { src: 'server_bg.png', link: '#' },
])
let current = ref(2)
const getImageUrl = image => {
  // 参数一: 相对路径
  // 参数二: 当前路径的URL
  return new URL(`/src/assets/img/${image}`, import.meta.url).href
}
</script>
